<template>
  <div id="player-wrap">
    <h1>player</h1>
    <h3>{{showPlayerPanel}}</h3>

    <transition enter-active-class="mini-slide-in" leave-active-class="mini-slide-out">
      <mini-player v-show="showMiniPlayer" @show-player-panel="handlePlayerPanel" />
    </transition>

    <transition
      enter-active-class="normal-fade-in"
      leave-active-class="normal-fade-out"
      @enter="enterAction"
      @after-enter="afterEnterAction"
      @leave="leaveAction"
    >
      <normal-player ref="player" v-if="showPlayerPanel" @close-player-panel="handlePlayerPanel" />
    </transition>
  </div>
</template>

<script>
import MiniPlayer from "./children/mini-player";
import NormalPlayer from "./children/normal-player";
export default {
  components: {
    MiniPlayer,
    NormalPlayer,
  },
  data() {
    return {
      showMiniPlayer: false,
      showPlayerPanel: true,
    };
  },
  watch: {
    showPlayerPanel(newVal) {
      this.showMiniPlayer = !newVal;
    },
  },
  methods: {
    handlePlayerPanel() {
      this.showPlayerPanel = !this.showPlayerPanel;
    },
    // normal player的动画事件
    enterAction(el, done) {
      this.$refs.player.handleEnter(done);
    },
    // normal player的动画事件
    afterEnterAction(el) {
      this.$refs.player.handleAfterEnter();
    },
    // normal player的动画事件
    leaveAction(el, done) {
      this.$refs.player.handleLeave(done);
    }
  },
};
</script>

<style scoped>
#player-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  left: 0;
  z-index: 1000;
}
@keyframes mini-slide-in {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes mini-slide-out {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}
.mini-slide-in {
  animation: mini-slide-in 300ms ease-in;
}
.mini-slide-out {
  animation: mini-slide-out 300ms ease-out;
}
@keyframes normal-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes normal-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.normal-fade-in {
  animation: normal-fade-in 300ms ease-in;
}
.normal-fade-out {
  animation: normal-fade-out 300ms ease-out;
}
</style>